<template>
	<div class="right-cps-view">
		<div class="tbs-view">
			<el-button type="primary">抽出条件</el-button>
		</div>

		<div class="container">
			<div class="row spb">
				<div class="item">
					<div class="label">
						抽出対象
					</div>
					<el-select v-model="userSetInfo.screenObj" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.screenObjList" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						{{ $t('message.homeExt.tab2.label_0') }}
					</div>
					<el-date-picker type="month" v-model="From" :format="format" :value-format="format"
						:disabled="!userSetInfo.screenObj" placeholder=" " class="picker">
					</el-date-picker>
					<span style="margin: 0 10px;">~</span>
					<el-date-picker type="month" v-model="To" :format="format" :value-format="format"
						:disabled="!userSetInfo.screenObj" placeholder=" " class="picker">
					</el-date-picker>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						計画種別
					</div>
					<el-select v-model="userSetInfo.planType" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.planType" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						未検査期間
					</div>
					<el-select v-model="userSetInfo.uncheckedPeriod" class="ipt mar10" placeholder=" ">
						<el-option v-for="item in listCom.uncheckedPeriod" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<span>年</span>
				</div>
			</div>


			<div class="row spb border-top">
				<div class="label">
					{{ listCom.deviceLabel }}
				</div>

				<el-input v-model="userSetInfo.macName" class="ipt long-ipt" style="width:calc(100% - 89px)"
					@input="userSetInfo.macName = $setMaxLength(userSetInfo.macName, 20)"></el-input>
			</div>


			<div class="row spb">
				<div class="item">
					<div class="label">
						カテゴリ
					</div>
					<el-select v-model="userSetInfo.ctg" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.ctgList" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="row spb">
				<div class="item">
					<div class="label">
						適用法規
					</div>
					<el-select v-model="userSetInfo.law" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.lawList" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						重要度
					</div>
					<el-select v-model="userSetInfo.imp" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.impList" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						腐食ループ
					</div>
					<el-select v-model="userSetInfo.corrosionLoop" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.corrosionLoop" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						測定部位
					</div>
					<el-select v-model="userSetInfo.measurementSite" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.measurementSite" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						検査方法
					</div>
					<el-select v-model="userSetInfo.inspMethod" class="long-ipt" placeholder=" ">
						<el-option v-for="item in listCom.inspMethod" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="row spb">
				<div class="item">
					<div class="label">
						定点区分
					</div>
				</div>
			</div>

			<div class="lastRow">
				<!-- <el-checkbox-group v-model="userSetInfo.thkArr" @change="handleCheckedCitiesChange"> -->
				<el-checkbox :label="index + 1" v-for="(item, index) in listCom.fixed" :key="index"
					v-model="userSetInfo[`thk${index + 1}`]">
					<el-input class="yellow" readonly :value="item"></el-input>
				</el-checkbox>
				<!-- </el-checkbox-group> -->
				<!-- <el-checkbox-group v-model="userSetInfo.thkArr" v-if="listCom.fixed">
					<el-checkbox :label="index + 1" v-for="(item, index) in listCom.fixed" :key="index">
						<el-input class="yellow" readonly :value="item"></el-input>
					</el-checkbox>
				</el-checkbox-group> -->
			</div>

		</div>

		<!-- footer -->
		<footer class="footer-view">
			<el-button @click="clearData">{{ $t("message.planView.btn.clear") }}</el-button>
			<el-button type="primary" @click="okFn">
				{{ $t("message.planView.btn.get") }}
			</el-button>
			<el-button type="warning" @click="onCloseClick">
				{{ $t("message.public.close") }}
			</el-button>
		</footer>
	</div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];


import { GetThckDeterPlanCondSetCombox, GetThckDeterPlanCondSet, SetThckDeterPlanCondSet } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import { getCookie } from "@/utils/cookie";
import BASE from '@/utils/base'


export default {
	name: "TicknessConditions",
	props: {
		tableSelectRow: Object,
	},
	data() {
		return {
			checkAll: false,
			checkedCities: ['上海', '北京'],
			cities: cityOptions,
			isIndeterminate: true,
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
			value2: '',


			timeFormat: "yyyy-MM",

			time: "2022-2",

			checked: false,
			GSData: [
				{
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}, {
					list1: "11",
					list2: "全開放",
					list3: "22",
					list4: "2",
					list5: "22",
					list6: "22",
					list7: "22",
					list8: "2022-6",
				}
			],
			wrkClsListData: [
				{
					key: 9,
					label: "Ｍ／Ｈ開放"
				}, {
					key: 10,
					label: "開放"
				}, {
					key: 11,
					label: "359"
				},
			],
			// NEW
			listCom: [],
			format: "yyyy-MM",
			userSetInfo: {
				corrosionLoop: 0,
				ctg: 0,
				from: "",
				imp: 0,
				inspMethod: 0,
				law: 0,
				macName: "",
				measurementSite: 0,
				planType: 0,
				screenObj: 0,
				thk1: false,
				thk2: false,
				thk3: false,
				thk4: false,
				thk5: false,
				thk6: false,
				thk7: false,
				thk8: false,
				thk9: false,
				thk10: false,
				thkArr: [],
				to: "",
				uncheckedPeriod: ''
			},
			From: '',
			To: '',
			checkA: []
		};
	},
	components: {
	},
	computed: {
	},
	watch: {
		userSetInfo: {
			immediate: true,
			deep: true,
			handler(nVal) {
				console.log(nVal)
				if (nVal.screenObj) {
				} else {
					this.From = '';
					this.To = '';
				}

			},
		},
	},
	methods: {
		async okFn() {
			// this.userSetInfo.thkArr = [];
			// for (const object in this.userSetInfo) {
			// 	console.log(typeof (object));
			// 	if (object.indexOf('thk') != -1) {
			// 		this.userSetInfo[object] = Number(this.userSetInfo[object]);
			// 	}
			// }
			this.userSetInfo.from = this.From;
			this.userSetInfo.to = this.To;
			let res = await SetThckDeterPlanCondSet(this.userSetInfo);
			if (res.data.code != 0) {
				this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
				return
			}
			this.$emit("CloseRightTables");
			this.$message.success('OK')
			await this.initFn();
			this.$emit("reGetMTTableInfo");
		},
		handleCheckedCitiesChange(value) {
			console.log(value);
			console.log(this.checkA);
		},

		// 获取时间选择器焦点时。矫正时间样式
		changeStyle() {
			$('.el-picker-panel').css({ "left": "auto", "right": "30px" })
			$('.el-date-table td span').css({ "line-height": "26px" })
			$('.el-picker-panel__link-btn').css({ "background": "#fff" })
		},
		changeData(e) {
			console.log(e)
			console.log(this.value1)
		},
		onCloseClick() {
			this.$emit("CloseRightTables");
		},
		handleSelectionChange(e) {
			console.log("handleSelectionChange", e)
			// this.checkboxSelectedList = e;
			// eventBus.$emit("reportformLeftMacSelect", e);

			// // 通知名称和code跳回首页图纸加载対应机器
			// if (e.length != 0) {
			// 	this.$store.commit("changeMacName", e[e.length - 1].name);
			// 	this.$store.commit("changeMacCode", e[e.length - 1].macCode);
			// 	this.$store.commit("changeMacNameb", e[e.length - 1].macName);
			// }
		},
		dateChange(val) {
			console.log(`dateChange(${this.dateValue})`, val);
			//     this.getResOfferEjectDataApi();
		},

		// -----------------------
		async GetThckDeterPlanCondSetApi() {
			let DataJson = {
				Account: getLocalStorage("userName")
			};
			let res = await GetThckDeterPlanCondSet(DataJson);
			this.userSetInfo = res.data.data;
			for (const object in this.userSetInfo) {
				console.log(typeof (object));
				if (object.indexOf('thk') != -1 && object != 'thkArr') {
					this.userSetInfo[object] = Boolean(this.userSetInfo[object]);
				}
			}
			console.log('userSetInfo', this.userSetInfo);
		},
		clearData() {
			console.log('clear')
			this.userSetInfo = {
				corrosionLoop: 0,
				ctg: 0,
				from: "",
				imp: 0,
				inspMethod: 0,
				law: 0,
				macName: "",
				measurementSite: 0,
				planType: 0,
				screenObj: 0,
				thk1: false,
				thk2: false,
				thk3: false,
				thk4: false,
				thk5: false,
				thk6: false,
				thk7: false,
				thk8: false,
				thk9: false,
				thk10: false,
				thkArr: [],
				to: "",
				uncheckedPeriod: ''
			}
			this.From = "";
			this.To = "";
		},
		async GetThckDeterPlanCondSetComboxApi() {
			let DataJson = {
				PltCode: this.$store.state.pltCode == '' ? 0 : this.$store.state.pltCode,
				MacType: this.$store.state.macType == '' ? 0 : this.$store.state.macType,
			};
			let res = await GetThckDeterPlanCondSetCombox(DataJson);
			this.listCom = res.data.data;
			console.log('listCom', this.listCom);
		},
		// NEW
		async initFn() {
			// 获取下拉框
			await this.GetThckDeterPlanCondSetComboxApi();
			// 获取用户设定的信息
			await this.GetThckDeterPlanCondSetApi();
		}
	},
	created() {
	},
	mounted() {
		if (BASE.IP == "http://192.168.33.200:8085") {
			this.timeFormat = "yyyy-MM";
		} else if (BASE.IP == "https://eng-dev-api.a-mis.com") {
			this.timeFormat = "MM-yyyy";
		} else if (BASE.IP == "https://demoapi.richtechcn.com") {
			this.timeFormat = "yyyy-MM";
		}
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-cps-view {
	width: 100%;
	height: calc(100% - 2px);
	padding: 16px 0 50px 0;
	border: 1px solid #c3c3c3;
}

.tbs-view {
	padding: 0 16px;

	button {
		width: 50% !important;
		height: 32px;
		text-align: center;
		border: 1px solid #d3d3d3;
		background: #106ebe;
		color: #fff;
		line-height: 0;
		border-radius: 0;
	}
}

.list {
	margin-bottom: 30px;

	::v-deep .elx-cell--title {
		margin: 0 auto;
	}

	.mark_whole {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		margin: 0 auto;
	}

	.mark_half {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 2px solid black;
		margin: 0 auto;
	}

	.mark_shut {
		width: 15px;
		height: 3px;
		// border-radius: 50%;
		background-color: black;
		margin: 0 auto;
	}

	::v-deep .elx-cell--title .elx-checkbox--icon::before {
		display: none;
	}
}

.row {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding: 10px 0;
	align-items: center;

	.item {
		width: 48%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.label {
			width: 89px;
			min-width: 89px;
			height: 32px;
			display: flex;
			align-items: center;
		}

	}

	.w130 {
		max-width: 130px;
		min-width: 130px;
		width: 130px;
	}

	button {
		width: 68px;
		height: 32px;
		line-height: 32px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
	}

	.fb {
		display: flex;
		justify-content: space-between !important;
	}
}

.alits {
	align-items: flex-start !important;
}

.ipt {
	width: 182px;
	height: 32px;

	::v-deep .el-input {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 182px;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}

}

.picker {
	width: 199px;
	height: 32px;

	::v-deep .el-input {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 199px;
		height: 32px;

	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		// color: #909399;
		// display: none;
	}
}

.yellow {
	width: 120px;
	height: 32px;
	margin-bottom: 10px;

	::v-deep .el-input__inner {
		width: 120px;
		height: 32px;
		background: #ffffe1 !important;
	}
}

.long-ipt {
	width: 427px;
	min-width: 427px;
	height: 32px;

	::v-deep .el-input--suffix {
		width: 100%;
	}

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}

	::v-deep .el-icon-time:before {
		content: "";
		display: block;
		transform: translateY(-3px);
	}

	::v-deep .el-range-separator {
		transform: translateY(-3px);
	}
}

.long {
	width: 460px;
	min-width: 460px;
}

::v-deep .el-picker-panel__footer {
	background-color: red;
}

.orange {
	::v-deep .el-input__inner {
		background: #ffdeac;
	}
}



.container {
	width: 100%;
	height: calc(100% - 32px);
	overflow-y: scroll;
	padding: 12px 8px 28px 16px;

	.add-view {
		width: 100%;
		padding-bottom: 12px;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 12px;

		button {
			width: 68px;
			height: 32px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			margin-left: 12px;
			border-radius: 4px;
		}
	}
}

.radio-view {
	width: 238px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 3px;

	::v-deep .el-radio {
		width: 35%;
	}
}

.textarea {
	::v-deep .el-textarea__inner {
		resize: none;
		// background: #ffffe1;
	}
}

.footer-view {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	background: #ffffff;

	button {
		min-width: 82px;
		height: 32px;

		// border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
		line-height: 0;
	}

	button:nth-child(2) {
		// background: #106ebe;
		// color: #fff;
		padding: 0 15px;
	}

	button:nth-child(3) {
		position: absolute;
		// background: #eb7421;
		// color: #fff;
		right: 0px;
	}
}

.center {
	text-align: center !important;
}

.w48 {
	width: 48px !important;
	min-width: 48px !important;

	::v-deep .el-input__inner {
		width: 100%;
		height: 32px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
}

.b700 {
	font-weight: 700;
}

.spb {
	justify-content: space-between !important;
}

.ii ::v-deep .el-input__suffix {
	display: none;
}

::v-deep .el-icon-date {
	// background-color: red;
	float: right;
	// transform: translateX(120px);
}


::v-deep .row--current {
	background-color: rgb(233, 236, 237) !important;
}

.mar10 {
	margin-right: 10px;
}

.border-top {
	border-top: 1px solid #f0f0f0;
}

.border-bottom {
	border-bottom: 1px solid #f0f0f0;
}

.border-left {
	border-left: 1px solid #f0f0f0;
}

.border-right {
	border-right: 1px solid #f0f0f0;
}
</style>